<template>
  <div>
    <table
      border="1"
      bordercolor="#20f3e8"
      cellspacing="0"
      style="width: 600px; height: 50px; text-align: center"
    >
      <thead>
        <tr>
          <th>商品</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
        <tr v-for="(arr1, index) in arr2" :key="index">
          <td>{{ arr1.name }}</td>
          <td>{{ arr1.num }}</td>
          <td>{{ arr1.shu }}</td>
          <td><button>删除</button></td>
        </tr>
      </thead>
    </table>
    <f11 :arr="arr"  @sss="acc"></f11>
  </div>
</template>
<script>
import f11 from "./分页器.vue";
export default {
  props: ["arr"],
  data() {
    return {
      // 条数
      shu1: this.arr[0].num1,
      arr2: [],
    };
  },
  created() {},

  watch: {
    arr: {
      handler() {
        this.arr2 = [...this.arr.slice(0, this.arr[0].num1)];
      },
      immediate: true, //一进入页面就执行handler里的代码
      deep: true,
    },
  },
  computed: {},
  components: {
    f11,
  },
  methods: {
    acc(val) {
        this.arr2=[...val]
    },
  },
};
</script>
<style lang='less' scoped>
</style>
